<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button data-action="save">btn1</button>
    <button data-action="edit">btn2</button>
    <button data-action="del">btn3</button>
    <button data-action="update">btn4</button>
    <script>
        const methods = {
            save() {
                console.log('save');
            },
            del() {
                console.log('del');
            },
            edit() {
                console.log('edit');
            },
            update(e) {
                console.log(this, e);
                console.log('update');
            },
        }
        document.onclick = function (e) {
            const target = e.target;
            const action = target.dataset.action;
            // 判断action和action[方法]不能undefined
            if (action === undefined || methods[action] === undefined) return;
            // 调用事件执行的方法，绑定this，传递事件对象
            methods[action].call(target, e);
        }



    </script>

</body>

</html>